<template>
    <div class="public">
        <zxjtHeader>
            <template v-slot:headerName>{{ scName }}</template>
            <template v-slot:headerOtherIcon>
                <img @click="sharePage" class="share" src="../assets/images/zxjt/share.png">
            </template>
        </zxjtHeader>
        <div class="public-main">
            <img class="public-background" src="../assets/images/zxjt/public_background.png" alt="">
            <div class="public-content">
                <div class="public-details">
                    <div
                        :class="[msgHidden ? 'public-detail' : 'public-detail-full', initialHidden ? '' : 'public-detail-full']">
                        {{ detailMsg }}
                        <!-- <div class="column-details">{{detailMsg}}</div> -->
                    </div>
                    <div v-if="msgHidden">
                        <van-icon v-show="initialHidden" class="arrow-down" name="arrow-down" size="0.8rem"
                            @click="initialHidden = false" />
                        <van-icon v-show="!initialHidden" class="arrow-up" name="arrow-up" size="0.8rem"
                            @click="initialHidden = true" />
                    </div>
                    <div class="subscribe-btn">
                        <img v-show="!followFlag" class="btn" src="../assets/images/zxjt/subscribe-btn.png"
                            @click="clickFollow">
                        <img v-show="followFlag" class="btn-ok" src="../assets/images/zxjt/subscribe-btn-ok.png"
                            @click="clickCancelFollow">
                    </div>
                </div>

                <div class="public-video">
                    <div class="title">专栏视频</div>
                    <div class="common-video">
                        <videoList @fromVideoListInfo="fromVideoListData" :videoResultList="scVideo" :listFinished="finished" :listLoading="loading"></videoList>
                    </div>
                </div>
            </div>

        </div>
    </div>
</template>

<script>
import zxjtHeader from './compoments/zxjtHeader.vue'
import videoList from './compoments/videoList.vue'
import wxApi from "@/util/wxApi";
import { getFollowState, followSpecialColumn, cancelFollowSpecialColumn, getRecommendData, getColumnTabs } from '../util/api'
export default {
    mixins: [wxApi],
    components: {
        zxjtHeader,
        videoList
    },
    data() {
        return {
            initialHidden: true,
            followFlag: null,
            finished: true,
            loading: false,
            scVideo: [],
            detailMsg: '',
            scName: ''
        }
    },
    methods: {
        //点击订阅
        async clickFollow() {
            try {
                const dataMsg = await followSpecialColumn(this.tabId, 2)
                const { code, data } = dataMsg.data
                console.log(code, data, 123123);
                if (code === '000000') {
                    this.sensorsTrack('订阅')//订阅打点
                    this.followFlag = true//变为已订阅 
                }
            } catch (error) {
                console.log('订阅失败', error);
            }
        },
        //点击取消订阅
        async clickCancelFollow() {
            try {
                let dataMsg = await cancelFollowSpecialColumn(this.tabId, 2)
                const { code, data } = dataMsg.data
                console.log(code, data, 123123);
                if (code == '000000') {
                    console.log("取消订阅成功");
                    this.followFlag = false//变为订阅
                }
            } catch (error) {
                console.log("取消订阅失败", error);
            }
        },
        //查询是否已经订阅该专栏
        async getFollowStatus() {
            try {
                const dataMsg = await getFollowState(this.tabId, 2);
                const { code, data } = dataMsg.data;
                console.log(code, data, 1223)
                if (code === '000000') {
                    this.followFlag = data
                }
            } catch (error) {
                console.log("查询失败", error);
            }
        },
        // 查询专栏视频
        async SpecialColumnInfo() {
            // let landId = this.$route.query.laneId
            let scParams = {
                "userId": "1776083031124",//手机号（如果未登录，给一个固定的uuid用于请求判重）
                "mode": "11",// 默认11
                "deviceId": "xiaomi-12-1",//设备号
                "isNewIn": 1,//是否首屏（首屏1 非首屏 0）
                "laneCode": this.colId,//推荐位代码
                "appVer": "8.8.0",//版本号
                "appType": "android"//App类型
            }
            this.loading = true
            try {
                const dataMsg = await getRecommendData(scParams)
                const { code, data } = dataMsg.data
                if (code == '000000') {
                    const { items } = data
                    if (items.length) {
                        items.forEach(e => {
                            this.scVideo.push({
                                coverUrl: e.coverUrl,//封面
                                author: e.orgName,//作者姓名
                                contentTitle: e.contentTitle,//title
                                h5Url: e.h5Url,//跳转链接
                                duration: e.hzbVideo.duration,//视频时长
                                tagName: e.tags[0].tagName,//标签
                                videoLiveId: e.videoLiveId,//用于埋点
                                mainId: e.mainId,//用于埋点
                                videoId: e.videoId
                            })
                        });
                    }
                    //请求一次就没有数据了，因为没有分页
                    this.finished = true
                    this.loading = false
                }
            } catch (error) {
                console.log(error);
            }
        },
        //查询专栏信息
        async getMenuInfo() {
            try {
                const dataMsg = await getColumnTabs({})
                const { code, data } = dataMsg.data
                if (code === '000000') {
                    const { list } = data
                    if (list) {
                        list.forEach(item => {
                            if (item.parentId == 5 && item.laneId == this.colId) {
                                this.detailMsg = item.briefIntroduction
                                this.scName = item.tabName
                            }
                        })
                    }
                }
            } catch (error) {
                console.log('error');
            }
        },

        postAppShare() {
            const shareUrl = `${window.location.protocol}//${window.location.host}/#/${this.$channel}/publicSelection?tabId=${this.tabId}&laneId=${this.colId}&dzhPage=true`
            if (window.terminal.isZxjtAndroid) {
                KDS_Native.shareLive(this.scName, shareUrl, this.detailMsg, "")
            } else if (window.terminal.isZxjtIos) {
                let json = {
                    "title": this.scName,
                    "shareUrl": shareUrl,
                    "summary": this.detailMsg,
                    "base64Pic": ""
                }
                window.webkit.messageHandlers.shareLive.postMessage(json)
            }
            this.sensorsTrack('分享')//分享打点
        },
        //分享
        wxRegCallback() {
            const { shareIcon } = this.$store.state.orgShareObj || {};
            const { name, icon } = this.$store.state.SysOrgInfo || {};
            const shareUrl = `${window.location.protocol}//${window.location.host}/#/${this.$channel}/publicSelection?tabId=${this.tabId}&laneId=${this.colId}&dzhPage=true`
            let opstion = {
                //link: window.location.origin + '/#' + this.$route.path,
                link: shareUrl,
                title: this.scName || '【' + name + '】一起来看直播吧！', // 分享标题
                desc: this.detailMsg || "精彩直播，尽在" + name + "手机直播！", //分享描述
                imgUrl: shareIcon || icon,
                success: function () {
                    //alert("分享成功");
                },
                error: function (e) {
                    //alert('分享失败:'+JSON.stringify(e))
                }
            };
            this.sensorsTrack('分享')//分享打点
            this.ShareTimeline(opstion);
        },
        //点击分享
        sharePage() {
            this.postAppShare()
        },
        //功能打点
        sensorsTrack(functionName) {
            $sensorsTrack('financing_videoZoneFunctionClick', {
                page_name: '专栏详细页',
                module_name:'精品专栏',
                column_name: this.scName,
                function_name: functionName
            });
        },
        //视频点击打点
        clickVideoDot(mainId, video_id, video_name) {
          $sensorsTrack('financing_videoZoneVideoClick', {
                page_name: '专栏详情页',
                column_name:this.scName,
                main_id: mainId ? mainId : '',
                video_id: video_id,
                video_name: video_name
            });  
        },
        //视频点击打点（曝光）
        exposureVideoDot(mainId, video_id, video_name) {
          $sensorsTrack('financing_videoZoneVideoExposure', {
                page_name: '专栏详情页',
                column_name:this.scName,
                main_id: mainId ? mainId : '',
                video_id: video_id,
                video_name: video_name
            });  
        },
        fromVideoListData(vlData) {
            if (vlData.type == 'click') {
                this.clickVideoDot(vlData.mainId, vlData.videoLiveId, vlData.title)
            } else {
                this.exposureVideoDot(vlData.mainId, vlData.videoLiveId, vlData.title)
            }
        }
    },
    computed: {
        // detailMsg() {
        //     return this.$route.query.briefIntroduction
        // },
        //文字是否达到隐藏条件
        msgHidden() {
            return this.detailMsg?.length >= 35
        },
        //当前的专栏ID
        colId() {
            return this.$route.query.laneId
        },
        //专栏tabId(用于订阅。取消订阅、查询订阅)
        tabId() {
            return this.$route.query.tabId
        },
        //专栏名称
        // scName() {
        //     return this.$route.query.tabName
        // }
    },
    created() {
        this.getFollowStatus()
        this.SpecialColumnInfo()
        this.getMenuInfo()
    },
    mounted() {
        console.log(this.colId, "测试有没有从首页传过来laneId");
    }
}
</script>

<style scoped lang="less">
.public {
    background-color: #F2F2F3;
    width: 100%;
    height: 100%;
    overflow-y: scroll;
    .share {
        width: 44px;
        height: 44px;
        margin-right: 36px;
    }

    .header-search {
        margin-right: 36px;
    }

    .public-main {
        width: 100%;
        height: 100%;
        position: relative;

        .public-background {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 608px;
            z-index: 1;
        }

        .public-content {
            position: absolute;
            width: 96%;
            top: 30px;
            left: 16px;
            z-index: 10;

            .public-details {
                margin-left: 15px;

                .public-detail {
                    width: 570px;
                    height: 84px;
                    font-size: 30px;
                    font-weight: 400;
                    color: #ffffff;
                    line-height: 42px;
                    overflow: hidden;
                }

                .public-detail-full {
                    width: 570px;
                    font-size: 30px;
                    font-weight: 400;
                    color: #ffffff;
                    line-height: 42px;
                    overflow: auto;
                    height: auto;
                }

                .column-details {
                    width: 442px;
                    height: 74px;
                    margin-top: 13px;
                    font-size: 26px;
                    font-family: PingFangSC-Regular, PingFang SC;
                    font-weight: 400;
                    color: #FFE4E4;
                    line-height: 37px;
                }

                .arrow-down {
                    margin-top: 20px;
                    color: #ffffff;
                }

                .arrow-up {
                    margin-top: 20px;
                    color: #ffffff;
                }

                .subscribe-btn {
                    width: 152px;
                    height: 56px;
                    margin-top: 18px;

                    .btn,
                    .btn-ok {
                        width: 152px;
                        height: 56px;
                    }
                }
            }


            .public-video {
                width: 100%;
                height: auto;
                background-color: #ffffff;
                border-radius: 16px;
                margin-top: 29px;
                padding: 26px 15px;

                .title {
                    width: 136px;
                    height: 48px;
                    font-size: 34px;
                    font-weight: 600;
                    color: #262E40;
                }

                .common-video {
                    .video-detials {
                        width: 100%;
                        height: auto;
                        margin: 26px 0;
                        display: grid;
                        grid-template-columns: 335px 335px;
                        gap: 35px 20px;

                        .video-detial {
                            width: 335px;
                            height: 315.22px;
                            border-radius: 20px 20px 0 0;
                            overflow: hidden;

                            img {
                                width: 335px;
                                height: 210px;
                                border-radius: 20px;
                            }

                            .video-info {
                                margin-top: -5px;
                                width: 100%;
                                height: calc(100% - 210px);
                                display: flex;
                                flex-direction: column;
                                justify-content: space-between;

                                .title {
                                    width: 100%;
                                    white-space: nowrap;
                                    overflow: hidden;
                                    text-overflow: ellipsis;
                                    margin-top: 16px;
                                    font-size: 30px;
                                    font-weight: 600;
                                    color: #262E40;
                                }

                                .author {
                                    display: flex;

                                    .tag {
                                        width: 108px;
                                        height: 35px;
                                        background-color: #FEE4B0;
                                        font-size: 23px;
                                        line-height: 35px;
                                        text-align: center;
                                    }

                                    .name {
                                        padding-left: 9px;
                                        font-size: 26px;
                                        font-weight: 400;
                                        line-height: 35.2px;
                                    }
                                }
                            }
                        }
                    }

                    /deep/ .van-list__finished-text {
                        font-size: 25px;
                    }

                    /deep/ .van-loading__text {
                        font-size: 25px;
                    }
                }
            }
        }

    }
}
</style>
